<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
  <script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
  <script src="${pageContext.request.contextPath}/static/js/login/jquery.js"></script>
  <script src="${pageContext.request.contextPath}/static/js/login/Particleground.js"></script>
  
  <style type="text/css">
	body{
	  background: #008678 ;
	}
	html{height: 100%;overflow: hidden;}
	.touming{background:rgba(255, 255, 255, 0.1) none repeat scroll 0 0 !important;/*实现FF背景透明，文字不透明*/
		filter:Alpha(opacity=10); background:#fff;/*实现IE背景透明*/}
	input{
		color:#fff;
	}
  </style>
</head>
<body style="height: 100%;box-shadow: inset 0px 0px 360px 115px rgba(12, 255, 232, 0.4);">
<div align="center" style="position: absolute;top:50%;margin-top: -155px;width: 100%;">
	<div align="left" style="width:500px;">
		<fieldset class="layui-elem-field" style="padding: 30px;height: 220px;color: #fff;box-shadow: inset 0px 0px 120px 25px rgba(2, 185, 168, 0.4);">
		  <legend style="color:#fff;">登录</legend>
		  <div>
			<form class="layui-form layui-form-pane" action="">
			  <div class="layui-form-item">
			    <label class="layui-form-label touming">账号：</label>
			    <div class="layui-input-inline" style="width:315px;">
			      <input type="text" name="username" lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input touming">
			    </div>
			  </div>
			  
			  <div class="layui-form-item">
			    <label class="layui-form-label touming" >密码：</label>
			    <div class="layui-input-inline" style="width:315px;">
			      <input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input touming">
			    </div>
			  </div>
			  
			  <div class="layui-form-item" align="center">
			  	<br>
			    <button class="layui-btn touming" style="width:200px;border: 1px solid #e6e6e6;">登&nbsp&nbsp&nbsp录</button>
			  </div>
			</form>
		  </div>
		</fieldset>             
	</div>
</div>
          
<script>
layui.use(['form', 'layedit'], function(){
  var form = layui.form()
  ,layer = layui.layer
  ,layedit = layui.layedit;
  
  //自定义验证规则
  form.verify({
    title: function(value){
      if(value.length < 5){
        return '标题至少得5个字符啊';
      }
    }
    ,pass: [/(.+){6,12}$/, '密码必须6到12位']
    ,content: function(value){
      layedit.sync(editIndex);
    }
  });
  
  
  //监听提交
  form.on('submit(demo1)', function(data){
    layer.alert(JSON.stringify(data.field), {
      title: '最终的提交信息'
    })
    return false;
  });
  
  
});
$(document).ready(function() {
	  $('body').particleground({
	    dotColor: '#5cbdaa',
	    lineColor: '#5cbdaa'
	  });
	  $('.intro').css({
	    'margin-top': -($('.intro').height() / 2)
	  });
	});
</script>

</body>
</html>